import 'package:flutter/material.dart';
import 'package:sainbainu/common/models/response/group_list_response.dart';
import 'package:sainbainu/common/values/colors.dart';
import 'package:sainbainu/common/widgets/widget.dart';

const double _boxSize = 65.0;
const double _boxRadius = 5.0;

class GroupCard extends StatelessWidget {
  final CroupItemResponse? item;
  final VoidCallback? onTap;

  const GroupCard({
    Key? key,
    this.onTap,
    this.item,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: SizedBox(
        width: _boxSize,
        height: _boxSize + 20,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            _buildCoverArea(),
            Text(
              item?.groupName ?? '',
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: const TextStyle(
                color: AppColors.unactive,
                fontSize: 12,
              ),
            )
          ],
        ),
      ),
    );
  }

  /// 头部区域
  Widget _buildCoverArea() {
    return Container(
      width: _boxSize,
      height: _boxSize,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.white, width: 3),
        borderRadius: BorderRadius.circular(_boxRadius),
      ),
      child: Stack(
        children: [
          AspectRatio(
            aspectRatio: 1 / 1,
            child: _buildCoverImage(),
          ),
          Positioned(
            top: 0,
            right: 0,
            child: _buildToRightTag(),
          )
        ],
      ),
    );
  }

  /// 封面图片
  Widget _buildCoverImage() {
    return Hero(
      tag: '${item?.uniqueTag}_${item?.groupId}',
      child: ClipRRect(
        borderRadius: BorderRadius.circular(_boxRadius),
        child: CustomImage(url: item?.cover ?? ''),
      ),
    );
  }

  /// 右上角标签
  Widget _buildToRightTag() {
    return Container(
      height: 18,
      constraints: const BoxConstraints(maxWidth: _boxSize),
      padding: const EdgeInsets.symmetric(horizontal: 4),
      decoration: BoxDecoration(
        color: Colors.black.withOpacity(0.5),
        borderRadius: const BorderRadius.only(
          bottomLeft: Radius.circular(8),
          topRight: Radius.circular(_boxRadius),
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Image.asset(
            'assets/images/group-2.png',
            width: 11,
            height: 11,
          ),
          const SizedBox(width: 2),
          Text(
            '${item?.memberNum ?? 0}',
            maxLines: 1,
            overflow: TextOverflow.clip,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 10,
            ),
          ),
        ],
      ),
    );
  }
}
